<template>
    <div class="badge-delete-box">
        <div class="badge-delete" v-for="(item, index) in list" :key="index">
            <p :title="item.name">{{ item.name }}</p>
            <a-icon type="close-circle" class='icon-close' v-if="!item.cantDelete" @click="deleteItem(index)" />
        </div>
    </div>
</template>

<script>
export default {
    /**
     * 数据格式 [{name: "name"}]
     */
    name: 'BadgeDeleteBox',
    // model: {
    //     prop: 'list',
    //     event: 'deleteItem'
    // },
    props: {
        list: {
            type: Array,
            required: true
        }
    },
    data () {
        return {}
    },
    created () {

    },
    mounted () {

    },
    methods: {
        // 删除
        deleteItem (index) {
            this.$emit('deleteItem', this.list.filter((item, i) => index !== i))
        }
    }
}
</script>

<style scoped lang='less'>
.badge-delete-box {
    max-height: 80px;
    overflow: auto;
    .badge-delete {
        position: relative;
        display: inline-block;
        height: 26px;
        padding: 5px;
        font-size: 14px;
        border: 1px solid #cfd8dc;
        border-radius: 2px;
        margin: 6px 10px 10px 0;
        p {
            margin: 0;
            max-width: 200px;
            line-height: 16px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
        }
        .icon-close {
            position: absolute;
            font-size: 14px;
            right: -7px;
            top: -7px;
            cursor: pointer;
            background: #fff;
        }
    }
}
</style>
